<template>
	<div style="width: 100vw;margin-top: 2vh;">

		<div style="font-weight: bold;text-align: left;margin-left: 5%;font-size:1.8rem;">为您推荐</div>

		<div id="" style="width: 100vw;display: flex;flex-wrap: wrap;margin-top: 2vh;">

			<div v-for="item in list" style="width: 45vw;margin-left: 2vw;margin-top: 2vh;">
				<router-link :to="{path:'/details',query:{goods_id:item.goods_id}}">
					<div><img v-lazy="url+item.original_img" style="width: 40vw;"></div>
					<div
						style="margin-left: 4vw; font-weight: bold;overflow: hidden;text-overflow: ellipsis; white-space: nowrap;width: 45vw;">
						{{item.goods_name}}
					</div>
					<div class="details">
						{{item.goods_name}}
					</div>

					<div style="margin-left: 4vw;width: 45vw;font-size: 1.7rem;text-align: left;color: red;">
						<span style="font-size: 0.1rem;">￥</span> {{item.shop_price}}
					</div>
				</router-link>
			</div>


		</div>




	</div>








</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
   props:{
	 list:{
		 type:Array,
		 required:true
	 }  
   },
		data() {
			return {
				
				url: ''
			}
		},
		computed: {
			...mapGetters([
				'vuexNewShop',
				'vuexUrl'
			])
		},
		created() {
		
			// console.log(testStr)
			this.$store.dispatch("user/Home_Url").then(e => {
				// console.log(e,111)
				this.url = e
			})
		}


	}
</script>

<style>
	a {
		text-decoration: none;
		color: black;
	}

	.router-link-active {
		text-decoraction: none;
		color: #00ecfc;
	}

	.details {
		display: -webkit-box;
		overflow: hidden;
		white-space: normal !important;
		text-overflow: ellipsis;
		word-wrap: break-word;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin-top: 1vh;
		margin-left: 4vw;
		width: 45vw;
		font-size: 0.7rem;
		text-align: left;
	}
</style>
